<template>
	<view class="tab-bar" >
		<view class="tabbar-container" :style="bottomStyle">
			<view class="tabbar-item" v-for="(item, index) in tabBarList" :class="[item.isCenter ? 'center' : '']" @click="handleChange(item)">
				<view class="item-top">
					<image :src="currentPath == item.path ? item.selectIcon : item.icon"></image>
				</view>
				<view class="item-bottom" :class="[currentPath == item.path ? 'item-active' : '']">
					<text>{{ item.text }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'hwxcTabbar',
	data() {
		return {
			currentPath:"/pages/nationwideDelivery/nationwideDelivery",
			tabBarList: [
				{
					index: 0,
					path: '/pages/nationwideDelivery/nationwideDelivery',
					icon: '/static/image/qgs.png',
					selectIcon: '/static/image/qgs-active.png',
					text: '全国送',
					isCenter: false
				},
				{
					index: 1,
					path: '/pages/lightningSonde/lightningSonde',
					icon: '/static/image/sd.png',
					selectIcon: '/static/image/sd-active.png',
					text: '闪电送',
					isCenter: false
				},
				{
					index: 2,
					path: '/pages/healthVideo/healthVideo',
					icon: '/static/image/video.png',
					selectIcon: '/static/image/video-active.png',
					text: '健康视频',
					isCenter: false
				},
				{
					index: 3,
					path: '/pages/shoppingCart/shoppingCart',
					icon: '/static/image/shopping.png',
					selectIcon: '/static/image/shopping-active.png',
					text: '购物车',
					isCenter: false
				},
				{
					index: 4,
					path: '/pages/user/user',
					icon: '/static/image/user.png',
					selectIcon: '/static/image/user-active.png',
					text: '我的',
					isCenter: false
				}
			]
		};
	},
	computed: {
		bottomStyle() {
			const systemInfo = uni.getSystemInfoSync();
			const { safeAreaInsets } = systemInfo;
			const bottomSafeAreaHeight = safeAreaInsets.bottom || 0;
			return `padding-bottom: ${bottomSafeAreaHeight ? bottomSafeAreaHeight + 'rpx' : '40rpx'}`;
		}
	},
	mounted() {
		uni.hideTabBar();
		const currentPages = getCurrentPages();
		const currentRoute = currentPages[currentPages.length - 1].route;
		this.currentPath = '/'+currentRoute
	},
	methods:{
		handleChange(item){
			 uni.switchTab({ url: item.path })
		}
	}
};
</script>

<style lang="scss">
view {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	z-index: 999;
}

.tabbar-container {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	display: flex;
	align-items: center;
	padding-top:10rpx;
	color: #999999;
	background-color: #ffffff;
	height: 87px;
	.tabbar-item {
		height: 100rpx;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		text-align: center;
		margin-bottom: 30rpx;
		.item-top {
			width: 70rpx;
			height: 70rpx;
			padding: 10rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.item-bottom {
			font-size: 24rpx;
			width: 100%;
		}
	}
	.item-active {
		color: #e43927;
	}
	.center {
		display: block;
		position: relative;
		.item-top {
			flex-shrink: 0;
			width: 100rpx;
			height: 100rpx;
			position: absolute;
			top: -40rpx;
			left: calc(50% - 50rpx);
			border-radius: 50%;
			box-shadow: 0 0 5px #999;
			background-color: #ffffff;
		}
		.item-bottom {
			position: absolute;
			bottom: 5rpx;
		}
	}
}
</style>
